<template>
	<view class="cencon">
		<view class="top">
			<view class="header_left" @tap="hui"><image  src="/static/left2.png"  class="left_img"/></view>
			<view class="header">我的期权</view>
			<view class="header-fu" @tap="jilu">转让记录</view>
			<view class="tiao"></view>
			<view class="left">
				<view >期权总数</view>
				<view>{{couponValidList[0].num}}</view>
			</view>
			<view class="right">
				<view >锁定期权</view>
				<view>{{suonum}}</view>
				<button type="none" class="btn2" @click="lock">锁定</button>
			</view>
			</view>	
			<view class="row" v-for="(row,index) in couponValidList" :key="index">
				<view class="one">
					<view class="title">
						{{row.compony.name}}
						<!-- {{row.compony.name}} -->
					</view>
					<view class="term">
						{{row.compony.price}}
						<!-- 拥有期权{{row.compony.price}} -->
					</view>
				</view>
				<view class="jifen" @tap="showComments(row.id)">
					<view class="address-icon icon "><image class="icon_img" src="/static/right.png"/></view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				couponValidList: [],
				headerTop: 0,
				//控制滑动效果
				typeClass: 'valid',
				subState: '',
				theIndex: null,
				oldIndex: null,
				suonum:''
			}
		},
		onLoad() {
			this.data1()
			//兼容H5下排序栏位置
			// #ifdef H5
			//定时器方式循环获取高度为止，这么写的原因是onLoad中head未必已经渲染出来。
			let Timer = setInterval(() => {
				let uniHead = document.getElementsByTagName('uni-page-head');
				if (uniHead.length > 0) {
					this.headerTop = uniHead[0].offsetHeight + 'px';
					clearInterval(Timer); //清除定时器
				}
			}, 1);
			// #endif
		},
		methods: {
			// 返回上一页面
			hui:function(){
				uni.switchTab({
					url:'../My/My'
				})
			},
			// 数据刷新
			onPullDownRefresh: function() {
				this.data1()
			},
			data1(){
				uni.request({
					url:'http://tuiguang.yiyunoto.com/api/member/mem_option',
					header:{authtoken:this.$store.state.token},
					method:'POST',
					success:(res)=>{
						console.log("请求成功",res)
						this.couponValidList=res.data.data
						 uni.stopPullDownRefresh();
					},
					fail:(res)=>{
						console.log("请求失败",res)
					}
				})
			},
			switchType(type) {
				if (this.typeClass == type) {
					return;
				}
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				})
				this.typeClass = type;
				this.subState = this.typeClass == '' ? '' : 'show' + type;
				setTimeout(() => {
					this.oldIndex = null;
					this.theIndex = null;
					this.subState = this.typeClass == 'valid' ? '' : this.subState;
				}, 200)
			},
			touchEnd(index, $event) {
				//解除禁止触发状态
				this.isStop = false;
			},
			//跳转页面
			showComments(id){
				console.log("公司id",id)
				uni.navigateTo({
					url:'../Option_Details/new_file?id='+id
				})
				url:''
			},
			// 跳转锁定页面
			lock(){
				this.$api.msg("功能暂未开放")
				// uni.navigateTo({
				// 	url:'../lock/lock'
				// })
			},
			// 转让记录
			jilu:function(){
				uni.navigateTo({
					url:'../options_jilu/options_jilu'
				})
			}
		}
	}
</script>

<style lang="less">
	.cencon {
		width: 100%;
		height: 100%;
		
		background: #FFFFFF;
		box-sizing: border-box;
	}
	.top{
		width: 100%;
		height: 400upx;
		padding-top:70upx;
		background: #42a8ff;
	}
	.header_left{
		width: 60upx;
		height: 60upx;
		font-size: 28upx;
		float: left;
		padding-left: 30upx;
		color:#FFFFFF;
	}
	.left_img{
		width: 20upx;
		height: 40upx;
	}
	.header {
		width: 49%;
		text-align:right;
		font-size: 35upx;
		float: left;
		color:#FFFFFF;
	}
	.header-fu {
		font-size: 28upx;
		float: right;
		padding-right: 20upx;
		color: #FFFFFF;
	}
	.tiao {
		width: 100%;
		margin-top: 50upx;
		/* height: 1upx; */
		background: #E6E6E6;
	}
	.tou {
		padding-top:10upx;
	}
	.one {
		float: left;
	}
	.row {
		width: 100%;
		height: 143upx;
		background: #FFFFFF;
		margin-top: 2upx;
		border-bottom-width: 1upx;
		border-bottom-style: solid;
		border-bottom-color:#EDEDED;
	}
	.icon_img{
		width:20upx;
		height: 40upx;
	}
	.title {
		font-size:35upx;
		font-family:PingFangSC-Regular,PingFangSC;
		color:rgba(41,41,41,1);
		padding-left: 30upx;
		padding-top: 30upx;
	}
	.term {
		font-size:26upx;
		font-family:PingFangSC-Regular,PingFangSC;
		color:rgba(127,127,127,1);
		padding-left: 30upx;
		padding-top: 1upx;
	}
	.jifen {
		width:100upx;
		height:60upx;
		padding-left: 645upx;
		padding-top: 43upx;
	}
	.left{
		margin-top: 150upx;
		width: 40%;
		font-size:50upx; 
		color:#FFFFFF;
		box-sizing: border-box;
		float:left;
		>view:nth-child(2){
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
	.right{
		margin-top: 150upx;
		width: 40%;
		font-size: 50upx; 
		color:#FFFFFF;
		float:left;
		text-align: center;
		box-sizing: border-box;
		>view:nth-child(2){
			height: 50upx;
			line-height: 50upx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		>button:nth-child(3){
			width: 50%;
			margin: 10upx auto;
			font-weight: bold;
			height: 60upx;
			line-height: 60upx;
			font-size: 30upx;
			color: #FFFFFF;
			background: rgba(104, 185, 255, 0.8);
			box-shadow: #868686 3upx 3upx !important;
		}
	}
</style>
